import React from 'react';
import './index.css'

export default class Comment extends React.Component {
  state = {
    list: [
      { id: 1, name: 'jack', content: '沙发！！！' },
      { id: 2, name: 'rose', content: '板凳~' },
      { id: 3, name: 'tom', content: '楼主好人' }
    ],
    name: '', // 评论人
    content: '' // 评论内容
  }

  // 获取评论信息
  changeVal = (e) => {
    // 获取name和元素的值
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }

  // 发表评论
  addComment = () => {
    const { name, content, list } = this.state
    // 非空验证
    if (name.trim() === '' || content.trim() === '') {
      return alert('请输入评论人或者评论信息')
    }
    // 将最新的评论信息和之前的评论信息进行拼接, 产生新的评论信息
    let newList = [
      {
        id: Math.random(),
        name,
        content
      },
      ...list
    ]
    // 将最新的评论信息赋值给list
    this.setState({
      list: newList,
      name: '',
      content: ''
    })
  }

  // 渲染评论列表以及无数据的处理方式
  renderList() {
    const { list } = this.state
    if (list.length === 0) {
      return <div className="noList">暂无评论, 快去评论吧~~~~</div>
    }
    return (
      list.map(item => (
        <li key={ item.id }>
          <h4>评论人: { item.name }</h4>
          <p>评论内容: { item.content }</p>
        </li>
      ))
    )
  }
  render() {
    return (
      <div className="continor">
        <p>
          <input onChange={ this.changeVal } name="name" value={ this.state.name } placeholder="请输入评论人" />
        </p>
        <p>
          <textarea onChange={ this.changeVal } name="content" value= { this.state.content } cols="30" rows="10" placeholder="请输入评论内容" />
        </p>
        <p>
          <button onClick={ this.addComment }>
            发表评论
          </button>
        </p>
        <ul>
          { this.renderList() }
        </ul>
      </div>
    )
  }
}